<template>
	<view class="image">
		<view class="img" @tap="lookImg" @longpress="longFun">
			<!-- <image mode="widthFix" class="img-size" :src="imgUrl"></image> -->
			<u--image :src="imgUrl" mode="widthFix" width="600rpx" height="100%" radius="10">
				<view slot="error" style="font-size: 24rpx;">
					<view style="padding-left: 14rpx;"><u-icon name="photo" color="#909193" size="28"></u-icon>
					</view>
					<view>加载失败</view>
				</view>
				<template v-slot:loading>
					<u-loading-icon color="#FF6005"></u-loading-icon>
				</template>
			</u--image>
		</view>
		<view v-if="progress" class="progress">
			<view v-if="!success">
				<view class="img-btn">
					<button class="btn reselect" @click="reSelect">重选照片</button>
					<button class="btn" @click="exectTask">开始制作</button>
				</view>
				<view v-if="title == '人像抠图' || title == '清晰度增强'" class="decs">
					温馨提示：上传的图片里面必须包含人物，否则会处理失败，可能会出现空白现象。
				</view>
			</view>
			<view class="img-btn" v-if="success">
				<button class="btn reselect" @click="shareFriend">分享好友</button>
				<button class="btn" @click="saveImg">保存图片</button>
			</view>
		</view>
		<view class="progress" v-if="!progress">
			<!-- <l-circularProgress
				class="circle-progress"
				:isBgShow="false"
				:lineWidth="10"
				:boxWidth="100"
				:boxHeight="100"
				progressColor="#ff7900"
				fontColor="#999"
				bgColor="#999"
				isBgShow
				:percent="percent"
			></l-circularProgress> -->
			<progress-circle
			  ref="progress"
			  class="circle-progress"
				:progress="percent"
				:percent="percents"
				:text="text"
			></progress-circle>
		</view>
		
	</view>
</template>

<script>
	import progressCircle from '@/components/progress.vue'
	export default {
		components: { progressCircle },
		props: {
			imgUrl: {
				type: String,
			},
			progress: {
				type: Boolean,
				default: true
			},
			percent: {
				type: Number
			},
			percents: {
				type: Number
			},
			success: {
				type: Boolean
			},
			text: {
				type: String,
				default: '任务执行中，请勿离开页面'
			},
			imgUrlPath: {
				type: String,
			},
			title: {
				type: String,
			}
		},
		data() {
			return {
			}
		},
		methods: {
			drawCircle() {
				this.$emit('drawCircle')
			},
			beforeUpload() {},
			// 执行任务
			exectTask() {
				this.$emit('startMake')
			},
			reSelect() {
				this.$emit('reSelect')
			},
			saveImg() {
				this.$emit('saveImg')
			},
			shareFriend() {
				this.$emit('shareFriend')
			},
			lookImg() {
				this.$emit('lookImg')
			},
			longFun() {
				console.log('111')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.image{
		// position: relative;
		// margin: 40rpx 60rpx;
		margin-bottom: 80rpx;
	}
	.img {
		
		width: 600rpx;
		height: 100%;
		border-radius: 20rpx;
		
		.img-size {
			width: 100%;
			height: 100%;
			border-radius: 20rpx;
			object-fit: cover;
		}
	}
	.img-btn{ 
		display: flex;
		.btn {
			background: #ff6005;
			border-radius: 60rpx;
			width: 280rpx;
			color: #fff;
		}
		.reselect {
			background: transparent;
			color: #ff6005;
			border: 1px solid #ff6005;
			margin-left: 20rpx;
		}
	}
	.progress {
		position: relative;
		margin-top: 120rpx;
		.circle-progress {
			
			// position: absolute;
			// left: 50%;
			// transform: translate(-50%);
			margin-bottom: 80rpx;
		}
	}
	.progress-text {
		text-align: center;
		margin-top: 400rpx;
	}
	
	.decs {
		color: #999;
		font-size: 24rpx;
		margin-top: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 10rpx;
	}
	
</style>